<template>
  <div>
    <el-row>
      <el-col :span="24">
        <h1>放映管理</h1>
      </el-col>
    </el-row>
    <el-row >
      <el-col>
        <el-button @click="handleList">刷新</el-button>
        <el-button >添加电影</el-button>
      </el-col>
      <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
        <el-select v-model="cinemaId" slot="prepend" @change="findLobbyByCinema" style="width: 130px" placeholder="请选择">
          <el-option v-for="(cinema,i) in cinemaList" :label="cinema.cinemaName" :value="cinema.id"></el-option>
        </el-select>
        <el-select v-model="lobbyId" slot="prepend" style="width: 130px" placeholder="请选择">
          <el-option v-for="(lobby,i) in lobbyList" :label="lobby.lobbyName" :value="lobby.id"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="handleSelect">搜索</el-button>
      </el-input>
      <el-col :span="24">
        <el-table
            v-loading="loading"
            :data="tableData"
            style="width: 100%">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="cinemaName"
              label="影院名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="lobbyName"
              label="影厅名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="movieName"
              label="电影名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="startTime"
              label="开始时间"
              width="180">
          </el-table-column>
          <el-table-column
              prop="endTime"
              label="结束时间"
              width="180">
          </el-table-column>
          <el-table-column
              prop="money"
              label="预设金额"
              width="180">
          </el-table-column>
          <el-table-column  label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleUpdate(scope.row.id)">修改</el-button>
              <el-button style="margin-left: 5px" size="mini" @click="findOrders(scope.row.id)">查看该场次订单</el-button>
              <el-popconfirm
                  confirm-button-text='好的'
                  cancel-button-text='不用了'
                  icon="el-icon-info"
                  icon-color="red"
                  title="这是一段内容确定删除吗？"
                  @confirm="handleDelete(scope.$index)"
              >
                <el-button slot="reference" size="mini">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            @current-change="handlePage"
            :current-page.sync="page">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "ScreeningListView",
    data() {
      return {
        loading: true,
        tableData: [],
        cinemaList: [],
        cinemaId: '',
        lobbyList: [],
        lobbyCopyList: [],
        lobbyId: '',
        input: '',
        total: '',
        pageSize: '',
        page: 1
      }
    },
    created() {
      this.handleList();
    },
    methods:{
      handleList(){
        this.axios.get("manage/screening/list").then(response=> {
          if (response.data.code == 200) {
            console.log(response);
            this.tableData = response.data.data.list;
            this.total = response.data.data.total;
            this.pageSize = response.data.data.pageSize;
            this.cinemaList = response.data.cinemaList;
          }
        }).finally(()=>this.loading=false)
      },
      handleDelete(index){
        this.axios.get("manage/screening/delete",{params:{id:this.tableData[index].id}}).then(response=>{
          if (response.data.code==200){
            this.tableData.splice(index,1);
          }
        })
      },
      handlePage(){
        this.loading=true;
        this.axios.get("manage/screening/list",{params:{keyword:this.input,movieTypeId:this.select,pageNum:this.page}}).then(response=>{
          if (response.data.code==200){
            this.tableData = response.data.data.list;
            this.total = response.data.data.total;
            this.loading=false;
          }
        })
      },
      handleSelect(){
        this.page=1
        this.loading=true;
        this.axios.get("manage/screening/list",{params:{keyword:this.input,cinemaId:this.cinemaId,lobbyId:this.lobbyId,pageNum:this.page}}).then(response=>{
          if (response.data.code==200){
            this.tableData = response.data.data.list;
            this.total = response.data.data.total;
            this.loading=false;
          }
        })
      },
      handleUpdate(id){
        this.$router.push({path: "/screening/add", query: {
            id: id,
            cinemaList: this.cinemaList
          }})
      },
      findLobbyByCinema(){
        this.lobbyId='';
        this.axios.get("manage/screening/findLobbyListByCinemaId",{params:{id:this.cinemaId}}).then(response=>{
          if (response.data.code==200){
            this.lobbyList = response.data.data;
          }
        })
      },
      findOrders(id){
        this.$router.push({path:"/orders/list",query:{
            screeningId:id
          }})
      }
    }
  }
</script>

<style scoped>

</style>